<template>
  <div class="app-container">
    <content-title></content-title>
    <el-form ref="formData" :model="formData" :rules="rules" class="form-container"
             label-width="100px" label-position="right">
      <el-form-item label="密码:" prop="password">
        <span style="color:red">默认密码为用户名</span>
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="realName">
        <el-input v-model="formData.realName"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="formData.sex">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="昵称" prop="nickName">
        <el-input v-model="formData.nickName"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="formData.phone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formData.email"></el-input>
      </el-form-item>
      <el-form-item label="所属部门" prop="departmentId">
        <el-select v-model="formData.departmentId" placeholder="选择部门">
          <el-option
            v-for="item in allDepartment"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属角色" prop="departmentId">
        <el-checkbox-group
          v-model="checkedRole">
          <el-checkbox v-for="role in allRole" :label="role.id" :key="role.id">{{role.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item>
        <go-back :opt-type="optType"></go-back>
        <el-button :loading="loading" type="primary" @click="onSubmit" v-show="optType!=3">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

  import {pattern} from "@/utils/validate";
  import {detail, exist as existUserName, save, update} from "@/api/user";
  import {listOur as listDepartment} from "@/api/department";
  import {getRoleByUserId, listOur as listRole} from "@/api/role";

  export default {
    name: 'userDetail',
    props: {
      optType: {
        type: Number,
        default: 3
      }
    },
    data() {
      const usernameAsyncValidator = (rule, value, callback) => {
        if (this.formData.username === this.oldName) {
          callback();
        }
        existUserName(this.formData).then(function (response) {
          if (response.data === true) {
            callback(new Error(response.data))
          } else {
            callback();
          }
        }, function (error) {
          callback(new Error(error))
        });
      }
      return {
        oldName: '',
        loading: false,
        formData: {
          id: '',
          username: '',
          nickName: '',
          realName: '',
          phone: '',
          sex: '',
          departmentId: '',
          email: '',
          roleIds: '',
        },
        allDepartment: [],
        allRole: [],
        checkedRole: [],
        rules: {
          username: [
            {required: true, trigger: 'blur', message: "管理员登录用户名不能为空"},
            {pattern: pattern.username, trigger: 'blur', message: "用户名为2至12个英文数字组合"},
            {validator: usernameAsyncValidator, trigger: 'blur', message: "用户名已存在"}
          ],
          phone: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
          ],
          email: [
            {required: true, message: '请输入邮箱', trigger: 'blur'},
          ],
        },
        tempRoute: {}
      }
    },
    computed: {},
    created() {
      this.initOthers()
      this.getDetail()
      this.tempRoute = Object.assign({}, this.$route)
    },
    methods: {
      initOthers() {
        listDepartment().then(res => {
          if (res.data)
            this.allDepartment = res.data
        })
        listRole().then(res => {
          this.allRole = res.data
        })
        this.$business.getDetailById(this, getRoleByUserId, data => {
          if (data)
            this.checkedRole = data
        })
      },
      getDetail() {
        this.$business.getDetailById(this, detail, (data) => {
          this.oldName = data.username;
          this.formData = data
        })
      },
      onSubmit() {
        this.formData.roleIds = this.checkedRole.join(",")
        this.$business.save(this, save, update, "userList");
      }
    }
  }
</script>

